<template>
    emoji
    <a-card>
        <template #extra>
          <a-button :disabled="value == ''" @click="tofabu">发布</a-button>
        </template>
        <discord-picker input :value="value" gif-format="md" @update:value="value = $event" @emoji="setEmoji"
          @gif="setGif" />
      </a-card>
    <a-modal v-model:visible="visible" title="登录" @ok="handleOk">
      <div>
        user: <input type="text" v-model="usernames">
      </div>
      <div>
        email: <input type="text" v-model="emails">
      </div>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, ComponentInternalInstance, watch,defineProps,defineEmits } from "vue";
import { storeToRefs } from "pinia";
import { useDefault } from "../store/default"
import DiscordPicker from 'vue3-discordpicker'
import { message } from 'ant-design-vue';

let defaults = useDefault() 

let {users} = storeToRefs(defaults)
//登录弹框
const visible = ref<boolean>(false);
const showModal = () => {
  visible.value = true;
};
// emoji
let setEmoji = (emoji: any) => {
  console.log(emoji, "emoji")
}
let setGif = (gif: any) => {
  console.log(gif, "gif")
}

let value = ref("");
let emits = defineEmits(["handelemits"])
//点击发布
let tofabu = () => {
  //获取用户登录状态
//   console.log(users.value)
//   console.log(value.value)
  if(JSON.stringify(users.value)=="{}"){
   return  showModal()
  }

  emits("handelemits",value.value)
}
let usernames = ref('');
let emails = ref('');
const handleOk = (e: MouseEvent) => {
  console.log(usernames.value,"usernames")
  console.log(emails.value,"emails")
  let tests = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if(!tests.test(emails.value)){
    return message.warning("邮箱验证不对")
  } 
  let obj = {
    user:usernames.value,
    email:emails.value
  }
  defaults.getusers(obj)
  location.reload()
  // console.log(e);
  visible.value = false;
};
</script>
<style lang="scss">

</style>